<template>
	<view class="video" @click="open">
		<view class="grid margin-bottom text-center col-1" v-for="(item, index) in list" :key="index">
			<view class="bg-white text-black text-bold">
				<view class="flex">
					<view class="bg-white margin-xs bg-white radius video-title">
						<view class="title">
							<view class="text-cut">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white">
				<view class="flex">
					<view v-if="item.miss" class="video-margin bg-white radius">{{ item.miss }}</view>
					<view class="video-margin bg-white radius">{{ item.school }}</view>
					<view class="video-margin bg-white radius">{{ item.tag }}</view>
					<view class="video-margin-number bg-white radius"><text class="lg text-red cuIcon-hotfill"></text>{{ item.number }}</view>
					<likes :item="item._id" :like="item.is_like" :types="follow"></likes>
				</view>
			</view>
			<!-- poster 视频封面图(把题目拍照，以作为封面图使用) -->
			<video class="padding video-content" 
				enable-play-gesture="true"
				objectFit="fill" 
				:poster="item.poster"
				:title="item.content" 
				:src="item.video"
				:id="item._id"
				@play="playing"
				@click="increase(item)"
				>
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			types: {
				type: String,
				default: ''
			}
		},
		name:"videoList",
		data() {
			return {
				follow: this.types,
				videoId: '',
				startData: {
					clientX: '',
					clientY: ''
				},
			};
		},
		methods: {
			increase(item) {
				let number = Number(item.number) + 1
				this.$api.update_number({
					id: item._id,
					number: number
				})
			},
			// 切换视频时停止原播放视频
			playing(e) {
				// uni.createVideoContext(e.currentTarget.id, this).playbackRate(1.5)	倍数播放
				
				// 获取当前视频id
				let currentId = e.currentTarget.id
				// uni.createVideoContext获取视频上下文对象
				this.videoContent = uni.createVideoContext(currentId, this)
				// 获取json对象并遍历, 停止非当前视频
				let trailer = this.list
				for (let i = 0; i < trailer.length; i++) {
				  let temp = trailer[i]._id
				  if (temp !== currentId) {
					uni.createVideoContext(temp, this).pause()
				  }
				}
			},
			open() {
				this.$emit('click', this.item)
			}
		}
	}
</script>

<style lang="scss">
	.video {
		
		.video-title {
			text-align: left;
			width: 100%;
		}
		
		.video-margin {
			font-size: 11px;
			margin: 0px 3px 3px 5px;
		}
		
		.video-margin-number {
			font-size: 11px;
			margin: 2px 3px 3px 5px;
		}
		
		.video-content {
			width: 100%;
			height: 140px;
			
			.videl-cover{
				font-size: 15px;
				margin: 10px;
				word-break: break-all;
				word-wrap: break-word;
				white-space: pre-line;
				text-align: left;
			}
		}
	}
</style>
